<template>
  <!--  <div class="login-box">
    <div class="login">
      <div class="login-left">
        <img class="login-left1" src="../assets/images/Logo.jpg" >
        <img class="login-left2" src="../assets/images/IET_logo.png" >
      </div>
      <div class="login-right">
        <h2 class="fontColor">涟钢冷轧轧制-镀锌板形跑偏分析系统</h2>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item prop="username" style="margin-top:10px;">
            <el-input type="username" v-model="ruleForm.username" autocomplete="off" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')" autocomplete="off" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" style="width:100%;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="copy"></div>
  </div>-->
  <div class="login">
    <header class="logo center">
      <img src="../assets/images/logoandtext.png">
      <img src="../assets/images/logow.png">
      <!--      <div>
        北科工研
      </div>-->
    </header>
    <div class="content">
      <div class="content">
        <div class="content-left">
          <div class="text">
            <span>欢迎来到
              <img src="../assets/images/login-icon.svg" alt="">
            </span>
            鞍钢冷轧大数据分析系统
          </div>
        </div>
        <div class="form-con">
          <el-form ref="ruleForm" :rules="rules" :model="ruleForm" @keydown.enter.native="login">
            <el-form-item class="form-item" prop="account">
              <el-input v-model="ruleForm.username" placeholder="请输入用户名" size="large">
                <template slot="prepend">
                  <i class="el-icon-user" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item class="form-item" prop="password">
              <el-input v-model="ruleForm.password" placeholder="请输入密码" size="large" type="password">
                <template slot="prepend">
                  <i class="el-icon-lock" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="width-full" long type="primary" size="large" style="width: 100%"
                @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <footer class="center footerDesc">Copyright© 北京科技大学工程技术研究院</footer>
  </div>
</template>

<script>
import api from '@/api'
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        if (this.ruleForm.username !== '') {
          callback()
        }
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.password !== '') {
          callback()
        }
      }
    }
    return {
      ruleForm: {
        username: 'admin',
        password: '123456',
      },
      rules: {
        username: [
          {
            validator: validateUser,
            trigger: 'blur',
          },
        ],
        password: [
          {
            validator: validatePass,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    submitForm(formName) {
      console.log('确定')
      let _self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            username: this.ruleForm.username,
            password: this.ruleForm.password,
          }
          if (data.username === 'admin' & data.password === '123456') {
            localStorage.setItem('username', 'admin')
            localStorage.setItem('userID', '123')
            localStorage.setItem('rule', 'admin')
            _self.$router.push({
              name: 'main',
            })
            _self.$message({
              message: 'Welcome to 鞍钢冷轧大数据分析系统',
              type: 'success',
            })
          } else {
            this.$message({
              message: '账户不存在或密码错误',
              type: 'error',
            })
          }
          // api.login.login(data).then((res) => {
          //   console.log(res)
          //   console.log(111)
          //   if (res.data.msg === 'success') {
          //     if (res.data.username !== null) {
          //       localStorage.setItem('username', res.data.username)
          //       localStorage.setItem('userID', res.data.userID)
          //       localStorage.setItem('rule', res.data.rule)
          //       _self.$router.push({
          //         name: 'PLTCM1_RES',
          //       })
          //       if (res.data.username === 'admin') {
          //         _self.$message({
          //           message: '欢迎管理员登录！',
          //           type: 'success',
          //         })
          //       }
          //       // else if (res.data.username ==='yang') {
          //       //   _self.$message({
          //       //     message: '欢迎杨总登录！',
          //       //     type: 'success',
          //       //   })
          //       // }
          //       // else if (res.data.username ==='fu') {
          //       //   _self.$message({
          //       //     message: '欢迎超哥登录！',
          //       //     type: 'success',
          //       //   })
          //       // }
          //       else {
          //         _self.$message({
          //           message: '欢迎访问 涟钢冷轧轧制-镀锌板形跑偏分析系统',
          //           type: 'success',
          //         })
          //       }
          //     } else {
          //       this.$message({
          //         message: '账户不存在',
          //         type: 'error',
          //       })
          //     }
          //   }
          //   if (res.data.msg === 'error') {
          //     this.$message({
          //       message: '密码错误',
          //       type: 'error',
          //     })
          //   }
          // })
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.center {
  text-align: center;
}

.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../assets/images/login-bg.png) no-repeat fixed;
  background-size: cover;
}

.login .logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 50px;
  font-size: 32px;
  letter-spacing: 2px;
  color: #fff;
  font-weight: bolder;
}

.login .logo img {
  width: 216px;
  height: 56px;
  margin-right: 20px;
}

.login .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  display: flex;
  align-items: center;
}

.login .ivu-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.login .login-tip {
  font-size: 10px;
  text-align: center;
  color: #c3c3c3;
}

.login .footerDesc {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  color: #fff;
  font-size: 18px;
}

.login .footerDesc:before {
  content: '';
  display: inline-block;
  height: 8px;
  width: 100px;
  vertical-align: middle;
  background: url('../assets/images/footer-line.png') center no-repeat;
  background-size: contain;
  margin-right: 18px;
}

.login .footerDesc:after {
  content: '';
  display: inline-block;
  height: 8px;
  width: 100px;
  vertical-align: middle;
  transform: rotateY(180deg);
  background: url('../assets/images/footer-line.png');
  background-size: contain;
  margin-left: 18px;
}

.login .otherWay {
  font-size: 14px;
}

.login .otherWay .inline {
  display: inline-block;
}

.login .otherWay .align {
  vertical-align: middle;
}

.login .otherWay .marginLeft {
  margin-left: 20px;
  float: right;
}

.login .remember {
  font-size: 14px;
}

.el-form-item {
  height: auto !important;
}

.center {
  text-align: center;
}

.content {
  width: 800px;
  display: flex;
  align-items: center;
}

.content .form-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 32px 0;
  width: 46%;
  height: 400px;
  background: rgba(0, 0, 0, 0.4);
  /* blur*/
  backdrop-filter: blur(20px);
  padding: 32px 40px;
}

.content .content-left {
  background: #3391ff;
  width: 54%;
  height: 400px;
  padding: 40px 80px 40px 40px;
  font-size: 32px;
  color: #fff;
  letter-spacing: 8px;
  font-weight: 300;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content .content-left .text {
  margin-bottom: 30px;
}

.content .content-left span {
  font-size: 40px;
  display: block;
  border-bottom: 1px solid #fff;
  padding-bottom: 25px;
  margin-bottom: 20px;
  letter-spacing: 0.2em;
  font-weight: 300;
}

.content .content-left span img {
  height: 40px;
  vertical-align: middle;
}

/deep/ .el-form-item--small .el-form-item__error {
  padding-top: 8px;
}

.el-button--primary {
  background-color: #3391ff;
  color: #ffffff;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #3391ff;
  border-color: #3391ff;
}

/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #3391ff;
}

::v-deep .el-input input::-webkit-input-placeholder {
  color: #8d9095;
  font-size: 16px;
}

/deep/ .el-checkbox__inner:hover {
  border-color: #3391ff;
}

/deep/ .el-checkbox__label {
  color: #8d9095;
}

/deep/ .el-checkbox__inner {
  background-color: transparent;
  color: #cfd3dc;
}

/deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
  border: none;
  font-size: 16px;
  border-bottom: 1px solid #8d9095;
}

/deep/ .el-input__inner:focus {
  border-color: transparent !important;
  border-bottom: 1px solid #8d9095 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/deep/ .el-input-group__prepend {
  font-size: 26px;
  padding: 0 10px;
  background: rgba(141, 144, 149, 0);
  color: #8d9095;
  border: none;
}

/deep/ .el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
/deep/ .el-form-item.is-error .el-textarea__inner:focus {
  border: none;
}

/deep/ .el-input__inner {
  height: 50px;
}

/deep/ .el-button {
  height: 50px;
  font-size: 20px;
}

.form-item {
  margin-bottom: 25px;
}

.third-btn img {
  vertical-align: middle;
  width: 30px;
  animation: flick 1000ms infinite;
  -webkit-animation: flick 1000ms infinite;
}

.third-btn em {
  vertical-align: middle;
}

@keyframes flick {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

  to {
    opacity: 1;
  }
}
</style>
